<script setup lang="ts">
import { getConvertDateTime } from "@/utils/dateUtil";
import { ArticleVo } from "@/api/article/type";
import { toRefs } from "vue";

const props = defineProps({
  dataList: {
    type: Array<ArticleVo>,
    default: () => <ArticleVo[]>[],
  },
  ids: {
    type: Array<number>,
    default: () => <number[]>[],
  },
  tagList: {
    type: Array<SelectBox>,
    default: () => <SelectBox[]>[],
  },
  categoryList: {
    type: Array<SelectBox>,
    default: () => <SelectBox[]>[],
  },
});

const tagTypeList = ["primary", "success", "info", "warning", "danger"];

/**
 * 定义事件
 */
const emit = defineEmits([
  "handleUpdate", // 更新
  "handleDelete", // 删除
  "handleSelectionChange", // 选中或者取消
  "handleViewData", //查看数据
]);

const { dataList, ids, tagList, categoryList } = toRefs(props);
/**
 * 查看对应文章
 * @param articleId
 */
const viewArticle = (articleId: number): string => {
  return `${import.meta.env.VITE_APP_BLOG_WEB_API}/article/${articleId}`;
};

/**
 * 查看数据
 */
const viewData = (articleId: number) => {
  emit("handleViewData", articleId);
};

/**
 * 是否选中判断
 * @param articleId
 */
const isChecked = (articleId: number): boolean => {
  return !!ids.value.find((i) => i == articleId);
};

const isShowTag = (tags: string, item: SelectBox): boolean => {
  return !!(tags && tags.split(",").map(Number).includes(item.value));
};

const isShowCategory = (categoryId: number, item: SelectBox): boolean => {
  return categoryId == item.value;
};

const randomTagType = (): ElUiType => {
  return <"primary" | "success" | "info" | "warning" | "danger">(
    tagTypeList[Math.floor(Math.random() * tagTypeList.length)]
  );
};

/**
 * 更新
 * @param articleId
 */
const update = (articleId: number) => {
  emit("handleUpdate", articleId);
};

/**
 * 删除
 * @param articleId
 */
const deleteNode = (articleId: number) => {
  emit("handleDelete", articleId);
};

/**
 * 选中项变更
 * @param articleId
 */
const selectionChange = (articleId: number) => {
  emit("handleSelectionChange", articleId);
};
</script>

<template>
  <div>
    <el-card
      body-style="{ padding: '0px' }"
      v-for="(article, index) in dataList"
      :key="index"
      class="box-card"
      shadow="hover"
    >
      <!-- 博客展示信息 -->
      <div class="article-item">
        <!-- 图片 -->
        <div class="article-item-left">
          <el-image fit="cover" :src="article.cover" class="article-item-img" />
          <svg-icon
            v-if="article.isTop"
            icon-class="top"
            class="top"
            size="30px"
          />
          <svg-icon
            v-if="article.isOriginal"
            icon-class="original"
            class="original"
            size="30px"
          />
        </div>

        <!-- 右边信息 -->
        <div class="article-item-right">
          <!-- 标题 -->
          <div class="item-title">
            <el-link
              class="item-text-title"
              :underline="false"
              :href="viewArticle(article.id)"
              target="_blank"
              >{{ article.title }}
            </el-link>
            <p class="item-time">
              {{ getConvertDateTime(article.createTime) }}
            </p>
          </div>
          <!--类型-->
          <div class="item-type">
            <el-tag v-if="article.isOriginal" type="success">原创</el-tag>
            <el-tag type="primary" v-else>
              <a :href="article.reproductionUrl" target="_blank">转载</a>
            </el-tag>
          </div>
          <div class="item-label">
            <div class="item-tags">
              <div v-for="(item, index) in tagList" :key="index">
                <el-tag
                  v-if="isShowTag(article.tags, item)"
                  :type="randomTagType()"
                >
                  {{ item.label }}
                </el-tag>
              </div>
            </div>

            <span class="circle-step"></span>
            <div class="item-categories">
              <div v-for="(item, index) in categoryList" :key="index">
                <el-tag
                  v-if="isShowCategory(article.categoryId, item)"
                  :type="randomTagType()"
                >
                  {{ item.label }}
                </el-tag>
              </div>
            </div>
          </div>

          <!--数据信息及操作项-->
          <div class="item-info">
            <div class="item-info-left">
              <p class="item-readComment">
                浏览: <span>{{ article.viewCount }}</span>
              </p>
              <span class="circle-step"></span>
              <p class="item-readComment">
                点赞: <span>{{ article.likeCount }}</span>
              </p>
              <span class="circle-step"></span>
              <p class="item-readComment">
                收藏: <span>{{ article.collectCount }}</span>
              </p>
            </div>
            <div class="item-info-oper">
              <el-button
                link
                class="item-info-oper-text"
                @click="viewData(article.id)"
                >查看数据
              </el-button>
              <el-button
                link
                class="item-info-oper-text"
                @click="update(article.id)"
                >修改
              </el-button>
              <el-button
                link
                class="item-info-oper-text"
                @click="deleteNode(article.id)"
                >删除
              </el-button>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <svg-icon icon-class="more" size="20px" />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>Action 1</el-dropdown-item>
                    <el-dropdown-item>Action 2</el-dropdown-item>
                    <el-dropdown-item>Action 3</el-dropdown-item>
                    <el-dropdown-item disabled>Action 4</el-dropdown-item>
                    <el-dropdown-item divided>Action 5</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
        <span class="check-box" @click="selectionChange(article.id)">
          <svg-icon
            v-if="isChecked(article.id)"
            icon-class="check-box-on"
            size="30px"
          />
          <svg-icon
            v-else
            icon-class="check-box-off"
            size="30px"
            class="check-box-off"
          />
        </span>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.box-card {
  max-height: 180px;
  border-radius: 10px;
  border: 1px solid #d7d3d3;
  margin: 5px 0px;
  .article-item {
    position: relative;
    display: flex;
    flex-direction: row;
    .article-item-left {
      position: relative;
      .article-item-img {
        border-radius: 10px;
        width: 160px;
        height: 135px;
      }
      .top {
        position: absolute;
        top: 0;
        right: 0;
      }
      .original {
        position: absolute;
        bottom: 6.5px;
        right: 0;
      }
      &:hover {
        transform: scale(1.03);
        transition: all 0.5s ease-in-out;
      }
    }

    .article-item-right {
      padding-left: 20px;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      color: #999;
      font-size: 14px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      .item-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        .item-text-title {
          font-size: 20px;
          font-weight: bold;
          color: #555666;
          margin-bottom: 6px;
          -webkit-box-flex: 1;
          -ms-flex-positive: 1;
          flex-grow: 1;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          justify-content: left;
          &:hover {
            color: #5a9cf8;
          }
        }
        .item-time {
          min-width: 142px;
          text-align: right;
          height: 24px;
          line-height: 24px;
        }
      }
      .item-type {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 12px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
      .item-label {
        margin-top: 6px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 12px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .item-tags {
          padding: 0 5px 0 0;
        }
        .item-categories {
          padding: 0 0 0 5px;
        }
      }
      .item-info {
        margin-top: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        .item-info-left {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          .item-readComment {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: 0 8px;
            position: relative;
            &:first-child {
              margin-left: 0;
            }
          }
        }
        .item-info-oper {
          color: #222226;
          .item-info-oper-text {
            margin: 0 8px;
            padding: 0;
            &:hover {
              color: #98baf5;
            }
          }
          .el-dropdown-link:hover {
            border-radius: 5px;
            border: 1px solid #98baf5;
          }
        }
      }
    }
    .check-box {
      position: absolute;
      top: -25px;
      left: -20px;
      .check-box-off {
        display: none;
      }
    }
  }
  &:hover {
    filter: drop-shadow(0 0 0.5em #71a4ee);
    transform: scale(1.01);
    :deep(.check-box-off) {
      display: block !important;
    }
  }
}
.circle-step {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #555666;
  vertical-align: middle;
  border-radius: 50%;
}
</style>
